<template>
<!-- 这是店铺主页 -->
    <div id="store">
        <el-container>
            <el-header><Header></Header></el-header>
            <el-main>
                <div id="store_content">
                    <div class="content_store">
                        <div class="store_title" v-for="item in info" :key="item.brand_id">
                            <div class="store_imgs"><router-link :to="{path:'./introduce', query:{stoId: shopId}}"><img :src="url + info[0].logo" alt=""></router-link></div>
                            <div class="address_name">
                            <h2>{{info[0].brand_name}}</h2>
                            <div class="address_phone">{{$t("shop.contact")}}：{{info[0].cellphone_number}}</div>
                            <div class="address">{{$t("shop.address")}}：{{info[0].address}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="content_top">
                        <div class="top_parentBox"  v-for="item in shopList" :key="item.goods_id">
                            <div class="parentBox_img">
                                <router-link :to="{path:'./goodsDetail', query:{id: item.goods_id}}">
                                    <img :src=" url + item.ad_image" alt="" class="imgs">
                                </router-link>
                            </div>
                        </div>
                    </div>
                    <div class="content_bottom">
                        <h3>{{$t("shop.shopProduct")}}<i class="border"></i></h3>
                        <ul class="bottom_ul">
                            <li v-for="item in data" :key="item.goods_id" @click="details(item.goods_id)">
                                <img :src="url+item.goods_image" alt="">
                                <p>{{item.title}}</p>
                                <span>{{item.min_price}} 元</span>
                            </li>
                        </ul>
                        <!-- 分页 -->
                        <div class="pagination" v-show="pageBool">
                            <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="totals">
                            </el-pagination>
                        </div>
                    </div>
                    <div class="baidu_map">
                        <div class="baidu_content" v-if="baiduMap">
                            <baidu-map :center="center" :zoom="zoom" @ready="handler" style="width:100%;height:500px" :scroll-wheel-zoom='true'></baidu-map>
                        </div>
                    </div>
                </div>
            </el-main>
            <el-footer><Footer></Footer></el-footer>
        </el-container>
    </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
    data () {
        return {
            currentPage: 1, //默认第一页
            pageSize: 9,  //每页显示多少条数据
            totals: 0,   //一共多少条数据
            pageBool: false, //分页显示隐藏
            shopId: '', //店铺id,分页使用
            shopList: [],   //店铺顶部三个广告
            data: [],   //渲染的数据
            info: [],   //店铺数据
            url: "https://mp.uekea.cn/attachment/",
            center: {       //店铺，地图经纬度
                lng: 0,
                lat: 0
            },     
            zoom: 19,       // 地图缩放级别
            baiduMap: false,    // 百度地图的显示隐藏
        }
    },
    components: {
        Header,
        Footer,
    },
    methods: {
        // 跳到详情页面
        details(id) {
            this.$router.push({"path": "./goodsDetail", query: {id: id}})
        },
        // 分页监听当前所在页数
        handleCurrentChange(val) {
            var _this=this;
            _this.$get(`brand/${_this.shopId}/${val}`).then(res=>{
                if(res.code == 200) {
                    _this.data=res.data.goodsList;
                } else if(res.code == 404) {
                    _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');
                }
            })
        },
        // 百度地图
        handler ({BMap, map}) {
            var _this = this;
            // 初始化地图,设置中心点坐标
            var point = new BMap.Point(_this.center.lng, _this.center.lat);
            map.centerAndZoom(point, _this.zoom);
            // 添加鼠标滚动缩放
            map.enableScrollWheelZoom();
            // 添加缩放平移控件
            map.addControl(new BMap.NavigationControl());
            //添加比例尺控件
            map.addControl(new BMap.ScaleControl());
            //添加地图类型控件
            // map.addControl(new BMap.MapTypeControl());
            
            //设置标注的图标
            var icon = new BMap.Icon("https://uekea-1257881260.cos.ap-guangzhou.myqcloud.com/images/landmark.png",new BMap.Size(50,90));
            //设置标注的经纬度
            var marker = new BMap.Marker(new BMap.Point(_this.center.lng, _this.center.lat),{icon:icon});
            //把标注添加到地图上
            map.addOverlay(marker);
            var content = `<table>`;
            content = content + `<tr><td> 店铺：${_this.info[0].brand_name}</td></tr>`;
            content = content + `<tr><td> 联系人：${_this.info[0].principal}</td></tr>`;
            content = content + `<tr><td> 联系电话：${_this.info[0].cellphone_number}</td></tr>`;
            content = content + `<tr><td> 地址：${_this.info[0].address}</td></tr>`;
            content += `</table>`;
            var infowindow = new BMap.InfoWindow(content);
            // 图标点击的时候显示标注
            marker.addEventListener("click",function(){
                    this.openInfoWindow(infowindow);
            });
            // 标注默认显示
            var infoWindow = new BMap.InfoWindow(content) // 创建信息窗口对象
            map.openInfoWindow(infoWindow, point)
        },
    },
    created () {
        var _this=this;
        let Id = _this.$route.query.Id;
        _this.shopId = Id;
        _this.$get(`brand/${Id}`).then(res=>{
            console.log(res);
            if(res.code == 200) {
                _this.data=res.data.goodsList;
                _this.info = res.data.brandInfo;
                if(res.data.brandInfo.length > 0) {
                    _this.center.lng = Number(res.data.brandInfo[0].lng);
                    _this.center.lat = Number(res.data.brandInfo[0].lat);
                }
                // 百度地图的经纬度，都大于0，才显示地图
                if(_this.center.lng > 0 && _this.center.lat > 0) {
                    _this.baiduMap = true;
                } else {
                    _this.baiduMap = false;
                }
                if(res.data.total > 9) {
                    _this.totals = res.data.total;
                    _this.pageBool = true;
                } else {
                    // 隐藏分页组件
                    _this.pageBool = false;
                }
            } 
            // else if(res.code == 404) {
            //     // _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');
            //     conosle.log();
            // }
        })
        // 店铺顶部三个广告
        _this.$get(`brand/goods/recommend/${Id}`).then(res=>{
            if(res.code == 200) {
                _this.shopList=res.data;
            } 
            // else if(res.code == 404) {
            //     _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');
            // }
            
        })
    }
}
</script>

<style lang="less" scoped>
// 布局容器
.el-header {
    background-color: white!important;
    font-size: 0;
}
.el-header, .el-footer {
    color: #333;
    text-align: center;
    height: auto!important;
    padding: 0px;
}
.el-main {
    color: #333;
    padding: 0px;
    // 计算减去头部和底部的高度，就是中间的高度
    min-height: calc(100vh - 61px - 220px)
}
.el-aside {
    color: #333;
    text-align: center;
}
// 布局容器结束
#store {
    min-width: 1140px;
}
.content_store {
    background-color: rgba(0, 0, 0, 0.5);
    border-top: 1px solid #ccc;
    color: white;
    height: 120px;
    .store_title {
        margin: auto;
        margin-left: 150px;
        position: relative;
        .store_imgs {
            position: absolute;
            top: 20px;
            left: 0;
            width: 80px;
            height: 80px;
            display: inline-block;
            vertical-align: middle;
        }
        .address_name {
            width: 50%;
            height: 100%;
            margin-left: 110px;
            padding-top: 20px;
            h2 {
                font-weight: 700;
                margin: 0px;
                font-size: 20px;
            }
            .address {
                display: inline-block;
            }
            .address_phone {
                margin: 10px 0px;
            }
        }
    }
}
.content_top {
    .top_parentBox {
        position: relative;
        .parentBox_img {
            .imgs {
                width: 100% !important;
                height: 800px;
            }
        }
    }
}
.content_bottom {
    width: 65%;
    min-width: 1140px;
    margin: auto;
    margin-bottom: 80px;
    padding: 0px 20px;
    h3 {
        border-bottom: 2px solid #ccc;
        margin-top: 90px;
        font-size: 30px;
        padding-bottom: 15px;
        margin-bottom: 0px;
        text-transform: none;
        color: black;
        .border{
            display: inline-block;
            width: 30px;
            border-bottom:3px solid #E2B972;
            margin-left: 17px;
            vertical-align: bottom;
        }
    }
    
    .bottom_ul{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        text-align: center;
        margin-bottom: 20px;
        background-color: white;
        padding: 25px;
        li{
            border-radius: 10px;
            width: 26%;
            margin-top: 50px;
            margin-bottom: 10px;
            transition-duration: 1s;
            
            overflow: hidden;
            img{
            border-radius: 10px;
            height: 300px;
            width: 100%;
            }
            p {
                height: 60px;
                line-height: 50px;
                padding-top: 10px;
                margin-bottom: 10px;
                padding-left: 15px;
                padding-right: 15px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            span{
                color: #E2B972;
                display: inline-block;
                margin-bottom: 15px;
            }
        }
        li:hover{
            transform:translateY(-10px);
            transition-duration: 1.5s;
            box-shadow: 0px 8px 12px 3px #4E5454;
        }
    }
    .bottom_ul::after {
        content: '';
        display: block;
        width: 26%;
    }
    .pagination{
    width: 100%;
    margin-top: 35px;
    margin-bottom: 45px;
    text-align: center;
    }
    /deep/ .el-pagination span:not([class*=suffix]){
    font-size: 15px;
    }
    /deep/ .el-pagination button{
    height: 30px;
    }
    /deep/ .el-pagination.is-background .btn-prev{
    min-width: 32px;
    }
    /deep/ .el-pager li{
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    }
    /deep/ .el-pagination.is-background .el-pager li{
    min-width: 32px;
    }
    /deep/ .el-pagination .btn-prev .el-icon{
    font-size: 18px;
    }
    /deep/ .el-pagination .btn-next .el-icon{
    font-size: 18px;
    }
}
// 百度地图样式
// .baidu_content {
//     width: 80%;
//     margin: auto;
// }
/* 地图标注圆角显示 */
.BMap_bubble_title{
    color:black;
    font-size:13px;
    font-weight: bold;
    text-align:left;
}
.BMap_pop div:nth-child(1){
    border-radius:7px 0 0 0;
}
.BMap_pop div:nth-child(3){
    border-radius:0 7px 0 0;background:#ABABAB;;
    width:23px;
    width:0px;
    height:10px;
}
.BMap_pop div:nth-child(3) div{
    border-radius:7px;
}
.BMap_pop div:nth-child(5){
    border-radius:0 0 0 7px;
}
.BMap_pop div:nth-child(5) div{
    border-radius:7px;
}
.BMap_pop div:nth-child(7){
    border-radius:0 0 7px 0 ;
}
.BMap_pop div:nth-child(7) div{
    border-radius:7px ;
}
// 标注右上角的关闭按钮隐藏
.BMap_pop>img {
    display: none;
}
.anchorTR {
    display: none;
}
</style>